<template>
  <div v-show="count > 0" class="toolbar">
    <i class="el-icon-warning" style="color: #1890ff; font-size: 18px; margin-right: 10px;" />
    <span class="toolbar-text">
      Selected {{ count }} item{{ count > 1 ? 's' : '' }}
    </span>
    <slot>
      <el-button type="text" @click="$emit('active')">Active</el-button>
      <el-button type="text" class="toolbar-warning" @click="() => $emit('delete')">Delete</el-button>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      require: true,
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.toolbar {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  width: 100%;
  padding: 0px 20px;
  background-color: #e7f4ff;
  border: 1px solid rgba(24, 144, 255, 0.2);
  border-radius: 4px;
  font-size: 14px;
  .toolbar-text {
    margin-right: 20px;
  }
  .toolbar-warning {
    color: #ff5733;
  }
}


</style>
